function a(ele){return document.querySelector(ele)}
function c(ele){return document.createElement(ele)}

//ajax_get
function ajax_get(url){
    return new Promise((resolve,reject)=>{
        let xhr=new XMLHttpRequest()
        xhr.open("get",url,true)
        xhr.send()
        xhr.onreadystatechange=()=>{
            if(xhr.readyState === 4 && xhr.status === 200){
                resolve(xhr.responseText)
            }
        }
    })
}
//ajax_post
function ajax_post(url,str){
    return new Promise((resolve,reject)=>{
        let xhr=new XMLHttpRequest()
        xhr.open("post",url,true)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(str)
        xhr.onreadystatechange=()=>{
            if(xhr.readyState === 4 && xhr.status === 200){
                resolve(xhr.responseText)
            }
        }
    })
}
if(!localStorage.getItem("local_star")){
    localStorage.setItem("local_star","[]")
}
if(!localStorage.getItem("local_collect")){
    localStorage.setItem("local_collect","[]")
}

window.onload=function(){
    //当ajax请求未完成时，加载此loading页面
    // $("#loading").addClass("loading_show").addClass("loading")
    //当ajax请求完成时，关闭此loading页面
    // $("#loading").addClass("loading_hide")
    //设置res用的本地仓库
    localStorage.setItem("local_res","[]")
    //数据库中的数据放到本地仓库中
    ajax_get("./get.php").then(result=>{
        let obj=JSON.parse(result)
        obj=JSON.stringify(obj)
        localStorage.setItem("local_res",obj)
        let arr=localStorage.getItem("local_res")
        arr_res=JSON.parse(arr)
        create_res(arr_res)
    })
    //content用的本地仓库
    localStorage.setItem("local_content","[]")
    ajax_get("./get.php").then(result=>{
        let obj=JSON.parse(result)
        obj=JSON.stringify(obj)
        localStorage.setItem("local_content",obj)
        let arr=localStorage.getItem("local_content")
        arr_content=JSON.parse(arr)
        create_content(arr_content)
    })
}
//res渲染函数
function create_res(arr_res){
    a(".res-wrap").innerHTML=""
    let newArr=[]
    for(let i in arr_res){
        if(!newArr.includes(arr_res[i].type)){
            newArr.push(arr_res[i].type)
        }
    }
    for(let i in newArr){
        let res_a=c("a")
        res_a.className="res-a"
        let img=c("img")
        img.className="res-img"
        img.setAttribute("src","./img/"+newArr[i]+".jpg")
        let div=c("div")
        div.className="res-title"
        div.innerText=newArr[i]
        res_a.appendChild(img)
        res_a.appendChild(div)
        res_a.setAttribute("product_type",newArr[i])
        a(".res-wrap").appendChild(res_a)
        res_a.onclick=function(){
            window.location.href=encodeURI(encodeURI("http://localhost/mogujie/hot.html"+"?type="+this.getAttribute("product_type")))
        }
    }
}

//content渲染函数
function create_content(arr_content){
    a("section").innerHTML=""
    for(let i of arr_content){
        let content=$("<div></div>")
        content.addClass("content")
        let content_a1=$("<a></a>")
        let img=$("<img></img>")
        img.attr("src","./img/"+i.id+".jpg").addClass("content-img1")
        content_a1.addClass("content-a1").attr("tag",i.id).append($(img))
        let product_name=$("<div></div>")
        product_name.addClass("product_name").text(i.product_name)
        let product_price=$("<div></div>")
        product_price.addClass("product_price").text("￥"+i.product_price)
        let form=$("<form></form>")
        let star=$("<input>")
        star.attr("id","star").val("收藏").attr("tag",i.id).attr("type","button")
        star.on("click",function(){
            let a=JSON.parse(localStorage.getItem("local_star"))
            let content_star={
                collect:$(this).attr("tag")
            }
            if(a.length <= 0){
                a.push(content_star)
            }else{
               if(!a.find((item)=>{return item.collect == content_star.collect})){
                   a.push(content_star)
               }
            }
            localStorage.setItem("local_star",JSON.stringify(a))
        })
        let buy=$("<input>")
        buy.attr("id","buy").val("加入购物车").attr("tag",i.id).attr("type","button")
        buy.on("click",function(){
            let a=JSON.parse(localStorage.getItem("local_collect"))
            let content_collect={
                shop_cart:$(this).attr("tag")
            }
            if(a.length <= 0){
                a.push(content_collect)
            }else{
                if(!a.find((item)=>{return item.shop_cart == content_collect.shop_cart})){
                    a.push(content_collect)
                }
            }
            localStorage.setItem("local_collect",JSON.stringify(a))
            //同时将shop本地仓库的product_num更改为1
            // if(localStorage.getItem("shop")){
            //     let b=localStorage.getItem("shop")
            //     for(let i of b){
            //         let c=b.filter((item)=>{
            //             return item.id === this.shop_cart
            //         })
            //         c[0].product_num=1
            //     }
            // }
        })
        //点击大图跳转对应的详情页面
        content_a1.on("click",function(){
            let a="http://localhost/mogujie/detail.html?id="+$(this).attr("tag")
            $(this).attr("href",a)
        })
        form.append($(star)).append($(buy)).attr("id","form")
        content.append($(content_a1)).append($(product_name)).append($(product_price)).append($(form))
        $("section").append($(content))   
    }
}

//搜索栏
a("#search-form-input").onclick=function(){
    window.location.href="http://localhost/mogujie/search.html"
}

